<template>
    <basic-container>
        <el-divider class="divider-wrap" content-position="left">分辨率设置</el-divider>
        <el-slider v-model="valueForFont" :min="70" :max="120" @change="fontValChange" :marks="fontSizeInit"></el-slider>
    </basic-container>
</template>
<script>
import { setTheme, setFontSize } from "@/util/util";
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            text: "",
            list: [
                {
                    name: "theme-blue",//default
                    value: "#1C7DF0",
                    label:'天空蓝'
                },
            ],
            valueForFont: 100,
            fontSizeInit: {
                100: '默认'
            }
        }
    },
    computed: {
        ...mapGetters(["themeName"])
    },
    mounted () {
        this.text = this.themeName;
        if (!this.text) {
            this.text = "";
        }
    },
    methods: {
        fontValChange(val) {
            this.$store.commit("SET_FONTSIZE", val);
            setFontSize(val)
        },
        checkBg(value){
            this.checked = value
            this.text = value
        }
    },
    watch: {
        text: function (val) {
            this.$store.commit("SET_THEME_NAME", val);
            setTheme(val);
        },
    },
}
</script>
<style scoped>
.divider-wrap {
    margin: 20px 0 !important;
    text-align: center;
}
.list {
    width: 100%;
}
.word{
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 14px;
    margin-left: 6px;
}
.bg{
    width: 30px;
    height: 30px;
    border: 1px solid #c7c7c7;
    padding:4px;
    box-sizing:border-box;
    cursor:pointer;
    border-radius: 4px;
}
.checkBg{
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    box-sizing:border-box;
    border-radius: 4px;
}
</style>
